<script setup>
import { ref } from 'vue';

// 权限设置数据
const permissions = ref([
    {
        id: 1,
        title: '销售统计表',
        description: '可指定人员拥有销售统计表的权限，按照设置的部门下的员工查看数据。',
        ranges: [
            {
                range: '百账汇（广州）科技有限公司',
                users: ['张小姐'],
            },
        ],
    },
    {
        id: 2,
        title: '数字化诊断',
        description: '可指定人员拥有数字化诊断的权限。',
        ranges: [
            {
                range: '全部',
                users: ['张小姐', '曾子晴', '何睿'],
            },
        ],
    },
    {
        id: 3,
        title: '数字化诊断员工看板权限',
        description: '打开后所有员工都可以看到所有员工的作业效率分析数据。',
        enabled: false, // 开关状态
    },
    {
        id: 4,
        title: '企业财务难度判断条件',
        description: '',
        conditions: [
            {
                type: '凭证数量',
                options: [
                    {
                        label: '财务难度低',
                        value: '企业凭证数量在统计月份归属期内数量在1-10之间，判断财务难度较低',
                    },
                    {
                        label: '财务难度中',
                        value: '企业凭证数量在统计月份归属期内数量在11-30之间，判断财务难度中等',
                    },
                    {
                        label: '财务难度高',
                        value: '企业凭证数量在统计月份归属期内数量在30以上，判断财务难度较高',
                    },
                ],
            },
            {
                type: '标签',
                options: [
                    {
                        label: '财务难度低',
                        value: '客户“财务难度分类”标签中，选择了“财务难度低”标签的客户',
                    },
                    {
                        label: '财务难度中',
                        value: '客户“财务难度分类”标签中，选择了“财务难度中”标签的客户',
                    },
                    {
                        label: '财务难度高',
                        value: '客户“财务难度分类”标签中，选择了“财务难度高”标签的客户',
                    },
                ],
            },
        ],
    },
    {
        id: 5,
        title: '其他统计表',
        description: '指定人员可查询对应部门客户的统计数据按照“客户所属部门”来配置查询权限。',
        ranges: [
            {
                range: '百账汇（广州）科技有限公司',
                users: ['张小姐', '匡梦想', '曾子晴'],
            },
        ],
    },
]);
const name= ref('power')
// 切换开关状态
const toggleSwitch = (item) => {
    if (item.enabled !== undefined) {
        item.enabled = !item.enabled;
    }
};
</script>

<template>
    <div class="setting">
        <el-tabs v-model="name">
            <el-tab-pane name="power" label="权限控制">
                <div class="permission-card" v-for="item in permissions" :key="item.id">
                    <!-- 标题和描述 -->
                    <div class="card-header">
                        <h3>{{ item.title }}</h3>
                        <p v-if="item.description" class="description">{{ item.description }}</p>
                    </div>

                    <!-- 权限范围表格 -->
                    <div v-if="item.ranges" class="permission-table">
                        <div class="table-header">
                            <span>权限范围</span>
                            <span>人员</span>
                            <span>操作</span>
                        </div>
                        <div class="table-row" v-for="(range, index) in item.ranges" :key="index">
                            <span>{{ range.range }}</span>
                            <span>{{ range.users.join('，') }}</span>
                            <span>
                                <el-button type="text">编辑</el-button>
                                <el-button type="text">删除</el-button>
                            </span>
                        </div>
                    </div>

                    <!-- 开关控件 -->
                    <div v-if="item.enabled !== undefined" class="switch-control">
                        <el-switch v-model="item.enabled" active-text="开启" inactive-text="关闭"
                            @change="toggleSwitch(item)" />
                        <p class="switch-description">
                            {{ item.description }}
                        </p>
                    </div>

                    <!-- 条件配置 -->
                    <div v-if="item.conditions" class="condition-config">
                        <div class="condition-item" v-for="(condition, index) in item.conditions" :key="index">
                            <h4>{{ condition.type }}</h4>
                            <ul>
                                <li v-for="(opt, optIndex) in condition.options" :key="optIndex">
                                    <strong>{{ opt.label }}：</strong>
                                    <span>{{ opt.value }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<style lang="less" scoped>
.setting {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(239, 239, 239);
    padding: 20px;
    box-sizing: border-box;
}

.permission-card {
    background-color: white;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .card-header {
        margin-bottom: 20px;

        h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #333;
        }

        .description {
            margin: 0;
            color: #999;
            font-size: 14px;
        }
    }

    .permission-table {

        .table-header,
        .table-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #ebeef5;

            span {
                flex: 1;
                text-align: center;
            }
        }

        .table-header {
            font-weight: bold;
            background-color: #f5f7fa;
        }
    }

    .switch-control {
        margin-top: 20px;

        .switch-description {
            margin: 10px 0 0 0;
            color: #999;
            font-size: 14px;
        }
    }

    .condition-config {
        margin-top: 20px;

        .condition-item {
            margin-bottom: 20px;

            h4 {
                margin: 0 0 10px 0;
                font-size: 14px;
                color: #666;
            }

            ul {
                padding-left: 20px;
                margin: 0;

                li {
                    font-size: 14px;
                    color: #666;
                    line-height: 1.8;
                }
            }
        }
    }
}
</style>